
<%@ taglib prefix="form" tagdir="/WEB-INF/tags/form" %>

<%@ taglib prefix="util" tagdir="/WEB-INF/tags/util" %>

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>





<div  >
  
      <!-- Inicio da Grid Cliente -->
<div class="container-fluid span11">
<div class="well">

<!-- Caixa de busca -->

<form id="FormSearch">
  <div class="input-append">
              <input id="FiltroCliente" type="text" placeholder="Filtrar por..">
              <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"><i class="icon-search" > </i> Buscar Por
                  <span class="caret"></span>
                </button>
                <ul  class="dropdown-menu">
				  <li><a href="#">Nome</a></li>
                  <li><a href="#">Código</a></li>
                  <li><a href="#">CPF/CNPJ</a></li>
                </ul>
              </div>
            </div>
</form>

<!-- Fim da busca -->

<!-- Botão de Novo -->

<div id="ButtoNew" class="pull-right">
  <div><button href="#PopAddClient" data-toggle="modal" class="btn btn-inverse"><i class="icon-plus icon-white"></i> Novo</button> </div>
</div>

<!-- Fim do Botão -->

<!-- Grid -->
<h3 id="TitleWellContainer">Clientes</h3>
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>Código</th>
<th>Nome</th>
<th>Nome Fantasia</th>
<th>CPF/CNPJ</th>
<th>Fone</th>
</tr>
</thead>
<tbody>
<td width="70px;"><a href="#PopEditClient" role="button" title="Editar Cliente" data-toggle="modal"><div class="icon-pencil"></div></a><a href="#PopRemoveClient" role="button" title="Remover Cliente" data-toggle="modal"><div class="icon-remove"></div></a><a href="#PopEyeClient" role="button" title="Visões Gerais do Cliente" data-toggle="modal"><div class="icon-eye-open"></div></a></td>
<td width="90px;">028</td>
<td>Luiz Lukas</td>
<td>Lukas</td>
<td>Lukas</td>
<td>Lukas</td>
</tbody>
<tbody>
<td width="70px;"><a href="#PopEditClient" role="button" title="Editar Cliente" data-toggle="modal"><div class="icon-pencil"></div></a><a href="#PopRemoveClient" role="button" title="Remover Cliente" data-toggle="modal"><div class="icon-remove"></div></a><a href="#PopEyeClient" role="button" title="Visões Gerais do Cliente" data-toggle="modal"><div class="icon-eye-open"></div></a></td>
<td width="90px;">025</td>
<td>Luiz Lukas</td>
<td>Lukas</td>
<td>Lukas</td>
<td>Lukas</td>
</tbody>
<tbody>
<td width="70px;"><a href="#PopEditClient" role="button" title="Editar Cliente" data-toggle="modal"><div class="icon-pencil"></div></a><a href="#PopRemoveClient" role="button" title="Remover Cliente" data-toggle="modal"><div class="icon-remove"></div></a><a href="#PopEyeClient" role="button" title="Visões Gerais do Cliente" data-toggle="modal"><div class="icon-eye-open"></div></a></td>
<td width="90px;">026</td>
<td>Luiz Lukas</td>
<td>Lukas</td>
<td>Lukas</td>
<td>Lukas</td>
</tbody>
</table>


  </div>
<!-- Configurar Modals -->

<div id="PopAddClient" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="LabelAddClient" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="LabelAddClient"><img src="..\img\user_male.png"/></i>Novo Cliente</h3>
  </div>
  <div class="modal-body">
   <ul id="TabClient" class="nav nav-tabs">
              <li class="active"><a href="#indentficacao" data-toggle="tab">Identificação</a></li>
              <li class=""><a href="#end" data-toggle="tab">Endereço</a></li>
              <li class=""><a href="#cobr" data-toggle="tab">Cobrança</a></li>
    </ul>

	  <div id="TabClientContent" class="tab-content">

              <div class="tab-pane fade active in" id="indentficacao">
			  <div class="pull-right">

			  <form>
			  <fieldset>Tipo de Pessoa</fieldset><select onclick="pessoa(this.value)">
<option value="fisica">Pessoa Física</option>
<option value="juridica">Pessoa Juridica</option>
</select>
<br/>
<input type="text" id="cpf" placeholder="Insira CPF"></input> <br id="espacoform"/>
<input type="text" id="rg" placeholder="Insira o RG"></input>
<input type="text" id="cnpj" style="display:none;" placeholder="Insira CNPJ"></input> <br/>
<input type="text" id="ie" style="display:none;" placeholder="Inscrição estadual"></input>



			  <fieldset>Grupo</fieldset><input type="text" placeholder="Grupo do cliente" />
			  <p id="fieldtext"><b>Situação</b></p>
<label class="radio">
  <input type="radio" name="Ativo" id="optionsRadios1" value="" checked>Ativo</label>
<label class="radio">
  <input type="radio" name="Inativo" id="optionsRadios2" value="">Inativo</label>
			  </form>

			  </div>
			  <div>
			  <form>
			  <fieldset>Código</fieldset><input class="span2" type="text" placeholder="ID" />
			  <fieldset>Nome</fieldset><input type="text" placeholder="Nome do cliente" />
			  <fieldset>Fantasia</fieldset><input type="text" placeholder="Nome Fantasia" />
			  <fieldset>Contato</fieldset><input type="text" placeholder="Nome para o contato" />
			  <fieldset>Telefone</fieldset><input type="text" placeholder="N° Telefone" />
			  </form>
			  </div>
			  </div>

			  <div class="tab-pane fade" id="end">

			  <div class="pull-right">
			  <form>
			  <fieldset>Bairro</fieldset><input type="text" id="bairro" placeholder="Insira o bairro" />
			  <fieldset>N°</fieldset><input class="span4" type="text" placeholder="Número" />
              <fieldset>UF</fieldset><input type="text" id="estado" placeholder="Insira o Estado" />
			  <fieldset>Cidade</fieldset><input type="text" id="cidade" placeholder="Insira a Cidade" />

			  </form>
			  </div>
			  <div>
			  <fieldset>CEP</fieldset><input type="text" name="cep" id="cep" class="inputs" onblur="getEndereco()" placeholder="Insira o CEP"/>
			  <fieldset>Logradouro</fieldset><input id="rua" type="text" placeholder="Endereço" />
			  <fieldset>Código da cidade</fieldset><input type="text" placeholder="Código de área" />
			  <fieldset>Home Page</fieldset><input type="text" placeholder="Página na web" />
			  <fieldset>Email</fieldset><input class="span7" type="email" placeholder="seuemail@email.com" required>
			  </div>
			  </div>

			  <div class="tab-pane fade" id="cobr">
			   <form>
			  <div class="pull-right">
			  <fieldset>Bairro</fieldset><input type="text" id="bairro" placeholder="Insira o bairro" />
			  <fieldset>N°</fieldset><input class="span4" type="text" placeholder="Número" />
              <fieldset>UF</fieldset><input type="text" id="estado" placeholder="Insira o Estado" />
			  <fieldset>Cidade</fieldset><input type="text" id="cidade" placeholder="Insira a Cidade" />
			  </div>
			  <fieldset>CEP</fieldset><input type="text" name="cep" id="cep" class="inputs" onblur="getEndereco()" placeholder="Insira o CEP"/>
			  <fieldset>Logradouro</fieldset><input id="rua" type="text" placeholder="Endereço" />
			  <fieldset>Código da cidade</fieldset><input type="text" placeholder="Código de área" />
			  <fieldset>Home Page</fieldset><input type="text" placeholder="Página na web" />
			  <fieldset>Email</fieldset><input class="span7" type="email" placeholder="seuemail@email.com" required>
			  </form>

			 </div>
	</div>


  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar</button>
    <button class="btn btn-primary">Adicionar cliente</button>
  </div>
</div>


<div id="PopEyeClient" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="LabelEyeClient" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="LabelEyeClient"><img src="..\img\network.png"/></i>Visões Gerais</h3>
  </div>
  <div class="modal-body">
  <h5>Visualizando o cliente [Nome] [id]</h5>
<div class="accordion" id="accordion_eye">
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_eye" href="#collapseFour">
                      Informações Gerais
                    </a>
                  </div>
                  <div id="collapseFour" class="accordion-body in collapse" style="height: auto;">
                    <div class="accordion-inner">
              <form>
			  <div class="pull-right">
			  <fieldset>Código</fieldset><span class="uneditable-input" class="span4" type="text"></span>
			  </div>
			  <fieldset>Nome</fieldset><span class="uneditable-input" type="text" placeholder="Nome do cliente"></span>
			  <fieldset>Abreviação</fieldset><span class="uneditable-input" type="text" placeholder="Nome Fantasia"></span>
			  <fieldset>Tipo de Pessoa</fieldset><span class="uneditable-input" type="text" placeholder="J/F"></span>
			  </form>
					</div>
                  </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_eye" href="#collapseFive">
                     Informações de Endereço
                    </a>
                  </div>
                  <div id="collapseFive" class="accordion-body in collapse" style="height: 0px;">
                    <div class="accordion-inner">

			  <div class="pull-right">
			  <form>
			  <fieldset>Bairro</fieldset><span class="uneditable-input"type="text" id="bairro" placeholder="Insira o bairro"></span>
			  <fieldset>N°</fieldset><span class="uneditable-input" type="text" placeholder="Número"></span>
			  </div>
			  <fieldset>CEP</fieldset><span class="uneditable-input" type="text" name="cep" id="cep" class="inputs" onblur="getEndereco()"></span>
			  <fieldset>Logradouro</fieldset><span class="uneditable-input" id="rua" type="text"></span>
			  <fieldset>UF</fieldset><span class="uneditable-input" type="text" id="estado"></span>
			  <fieldset>Cidade</fieldset><span class="uneditable-input" type="text" id="cidade"></span>
			  </form>
			   </div>
                  </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_eye" href="#collapseSix">
                      Documentação
                    </a>
                  </div>
                  <div id="collapseSix" class="accordion-body in collapse" style="height: 0;">
                    <div class="accordion-inner">
                     Area para documentação.<br/>
					 Se Pessoa Física: CPF e RG<br/>
					 Se Pessoa juridica: CNPJ e IE
					 </div>
                  </div>
                </div>
				   <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_eye" href="#collapseSeven">
                      Informação de contatos
                    </a>
                  </div>
                  <div id="collapseSeven" class="accordion-body in collapse" style="height: 0;">
                    <div class="accordion-inner">
                     <form>
					 <div class="pull-right">
					 <fieldset>Cadastro</fieldset><span class="uneditable-input" type="text"></span>
					 <fieldset>Ultima compra</fieldset><span class="uneditable-input" type="text"></span>
					 </div>
					 <fieldset>Contato</fieldset><span class="uneditable-input" type="text"></span>
					 <fieldset>Telefone</fieldset><span class="uneditable-input" type="text"></span>
					 <fieldset>Fax</fieldset><span class="uneditable-input" type="text"></span>
					 </form>
					 </div>
                  </div>
                </div>
              </div>




  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar</button>
    <button  data-dismiss="modal" href="#PopEditClient" data-toggle="modal" class="btn btn-primary"><i class="icon-edit icon-white"></i> Editar informações</button>

  </div>
</div>


<div id="PopRemoveClient" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="LabelRemoveClient" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="LabelRemoveClient"><img src="..\img\remove_user.png"/>Remover Cliente</h3>
  </div>
  <div class="modal-body">
   <fieldset>Deseja remover o cadastro do cliente?</fieldset>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar</button>
    <button class="btn btn-danger">Confirmar exclusão</button>
  </div>
</div>



<div id="PopEditClient" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="LabelEditClient" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="LabelEditClient"><img src="..\img\edit_user.png"/></i>Editar Cliente</h3>

  </div>

  <div class="modal-body">
   <h5>Editando o cliente [Nome] [id]</h5>
   <ul id="TabClientEdit" class="nav nav-tabs">
              <li class="active"><a href="#indentficacaoedit" data-toggle="tab">Identificação</a></li>
              <li class=""><a href="#endedit" data-toggle="tab">Endereço</a></li>
              <li class=""><a href="#cobredit" data-toggle="tab">Cobrança</a></li>
			  <li class=""><a href="#classif" data-toggle="tab">Classificações</a></li>
			  <li class=""><a href="#depto" data-toggle="tab">Depto.</a></li>
    </ul>
	  <div id="TabClientEditContent" class="tab-content">

              <div class="tab-pane fade active in" id="indentficacaoedit">
			  <div class="pull-right">

			  <form>
			  <fieldset>Tipo de Pessoa</fieldset><select onclick="pessoa2(this.value)">
<option value="fisica2">Pessoa Física</option>
<option value="juridica2">Pessoa Juridica</option>
</select>
<br/>
<input type="text" id="cpf2" placeholder="Insira CPF"></input> <br id="espacoform2"/>
<input type="text" id="rg2" placeholder="Insira o RG"></input>
<input type="text" id="cnpj2" style="display:none;" placeholder="Insira CNPJ"></input> <br/>
<input type="text" id="ie2" style="display:none;" placeholder="Inscrição estadual"></input>

			  <fieldset>Grupo</fieldset><input type="text" placeholder="Grupo do cliente" />
			  <p id="fieldtext">Situação</p>
<label class="radio">
  <input type="radio" name="Ativo" id="optionsRadios1" value="" checked>Ativo</label>
<label class="radio">
  <input type="radio" name="Inativo" id="optionsRadios2" value="">Inativo</label>
			  </form>
			  </div>
			  <div>
			  <form>
			  <fieldset>Código</fieldset><input class="span2" type="text" placeholder="ID" />
			  <fieldset>Nome</fieldset><input type="text" placeholder="Nome do cliente" />
			  <fieldset>Fantasia</fieldset><input type="text" placeholder="Nome Fantasia" />
			  <fieldset>Contato</fieldset><input type="text" placeholder="Nome para o contato" />
			  <fieldset>Telefone</fieldset><input type="text" placeholder="N° Telefone" />
			  </form>
			  </div>
			  </div>

			  <div class="tab-pane fade" id="endedit">
			  <form>
			  <div class="pull-right">
			  <fieldset>Bairro</fieldset><input type="text" id="bairro" placeholder="Insira o bairro" />
			  <fieldset>N°</fieldset><input class="span4" type="text" placeholder="Número" />
              <fieldset>UF</fieldset><input type="text" id="estado" placeholder="Insira o Estado" />
			  <fieldset>Cidade</fieldset><input type="text" id="cidade" placeholder="Insira a Cidade" />
			  </div>
			  <fieldset>CEP</fieldset><input type="text" name="cep" id="cep" class="inputs" onblur="getEndereco()" placeholder="Insira o CEP"/>
			  <fieldset>Logradouro</fieldset><input id="rua" type="text" placeholder="Endereço" />
			  <fieldset>Código da cidade</fieldset><input type="text" placeholder="Código de área" />
			  <fieldset>Home Page</fieldset><input type="text" placeholder="Página na web" />
			  <fieldset>Email</fieldset><input class="span7" type="email" placeholder="seuemail@email.com" required>
			  </form>
			  </div>
			  <div class="tab-pane fade" id="cobredit">


			  			  <div class="pull-right">
			  <form>
			  <fieldset>Bairro</fieldset><input type="text" id="bairro" placeholder="Insira o bairro" />
			  <fieldset>N°</fieldset><input class="span4" type="text" placeholder="Número" />
              <fieldset>UF</fieldset><input type="text" id="estado" placeholder="Insira o Estado" />
			  <fieldset>Cidade</fieldset><input type="text" id="cidade" placeholder="Insira a Cidade" />

			  </form>
			  </div>
			  <div>
			  <fieldset>CEP</fieldset><input type="text" name="cep" id="cep" class="inputs" onblur="getEndereco()" placeholder="Insira o CEP"/>
			  <fieldset>Logradouro</fieldset><input id="rua" type="text" placeholder="Endereço" />
			  <fieldset>Código da cidade</fieldset><input type="text" placeholder="Código de área" />
			  <fieldset>Home Page</fieldset><input type="text" placeholder="Página na web" />
			  <fieldset>Email</fieldset><input class="span7" type="email" placeholder="seuemail@email.com" required>
			  </div>


			  </div>

			  <div class="tab-pane fade" id="classif">
			  <div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Informações de Classificação do Cliente
      </a>
    </div>
	 <div id="collapseOne" class="accordion-body collapse">
      <div class="accordion-inner">
	  <form>
	  <div class="pull-right">
			  <fieldset>Tipo</fieldset><input type="text" placeholder="Insira o tipo" /> <br/>
			  <fieldset>Area</fieldset><input type="text" placeholder="�?rea" />
	  </div>
			  <fieldset>Porte</fieldset><input type="text" placeholder="Porte" />
			  <fieldset>Atividade</fieldset><input type="text" placeholder="Atividade" />
	   </form>
      </div>
    </div>
  </div>

			 </div>
			 <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Informações Contábeis
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        <fieldset>Conta Contábil</fieldset><input type="text" placeholder="Insira a conta" /> <br/>
		<fieldset>Apêndice</fieldset><input type="text" placeholder="Apêndice" />
      </div>
    </div>
  </div>
</div>
<!-- Alerta que será exibido para confirmar a exlusão
<div id="AlertDeleteDepto" style="none;" class="alert alert-block alert-error fade in">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <h4 class="alert-heading">Confirmar exclusão.</h4>
            <p>Deseja realmente excluir o departamento: [Nome] [Id]</p>
            <p>
              <a class="btn btn-danger" id="ConfirmDelete" href="#">Confirmar</a> <a class="btn" id="CancelDelete" href="#">Cancelar</a>
            </p>
          </div>
<-- Fim do alerta -->

			  <!-- Departamento somente para pessoas juridicas -->
			 <div class="tab-pane fade" id="depto">
			  <table class="table table-hover">
			  <thead>
			  <tr>
			  <th></th>
			  <th>Nome</th>
			  <th>Fone</th>
			  <th>Rm</th>
			  <th>Contato</th>
			  <th>Celular</th>
			  </tr>
			  </thead>
			  <tbody>
			  <td width="52px;" ><a href="#PopEditDepto" role="button"><div class="icon-pencil"></div></a><a href="#" role="button" id="call_alert"><div class="icon-remove"></div></a></td>
			  <td>Luiz Lucas</td>
			  <td>(85)3483-4028</td>
			  <td>31</td>
			  <td>Lukas</td>
			  <td>(85)9705-4606</td>
			  </tbody>
			  <tbody>
              <td><a href="#PopEditDepto" role="button"><div class="icon-pencil"></div></a><a href="#" role="button" id="call_alert" ><div class="icon-remove"></div></a></td>
			  <td>Luiz Lucas</td>
			  <td>(85)3483-4028</td>
			  <td>31</td>
			  <td>Lukas</td>
			  <td>(85)9705-4606</td>
			  </tbody>
			  </table>



  <div class="accordion-group" id="accordion3">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseThre">
        <i class="icon-plus"></i>  Departamento
      </a>
    </div>
    <div id="collapseThre" class="accordion-body collapse">
      <div class="accordion-inner">
	  <div class="pull-right">
	  <form>
		<fieldset>Contato</fieldset><input type="text" placeholder="Contato"/>
		<fieldset>Celular</fieldset><input type="text" placeholder="Celular"/>
		</div>
        <fieldset>Nome</fieldset><input type="text" placeholder="Insira a descrição"/>
		<fieldset>Fone</fieldset><input type="text" placeholder="N° Telefone"/>
		<fieldset><b>Rm<b/></fieldset><input type="text" placeholder="Ramal"/>
		<button type="button" class="btn btn-primary pull-right"><i class="icon-plus icon-white"></i> Salvar</button>
		</form>
      </div>

    </div>
  </div>

			 </div>
	</div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar</button>
    <button class="btn btn-primary">Salvar configurações</button>
  </div>
</div>



<!-- Fim das configurações -->


</div>
</div>
     <!-- Fim das configurações -->
